<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/mainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">
    <ui:define name="top">
        <h:outputLabel value="Clientes" class="tituloPrincipal"/>
    </ui:define>

    <ui:define name="left">
    </ui:define>
    <ui:define name="content">
        <h:form id="contenido">

            <p:panel footer="Manejo">
                <p:messages id="messagesgproducto" showDetail="true" autoUpdate="true" closable="true" > 
                    <p:effect type="fade" event="load" delay="3000" />
                </p:messages>
                <p:panelGrid columns="2">
                    <h:outputLabel value="Cedula:"/>
                    <p:inputText value="#{clienteManager.cedula}"/>
                    
                    <h:outputLabel value="Nombre:"/>
                    <p:inputText value="#{clienteManager.nombre}"/>
                    
                    <h:outputLabel value="Apellido:"/>
                    <p:inputText value="#{clienteManager.apellido}"/>
                    
                    <h:outputLabel value="Direccion:"/>
                    <p:inputText value="#{clienteManager.direccion}"/>
                    
                    <h:outputLabel value="Telefono:"/>
                    <p:inputText value="#{clienteManager.telefono}"/>
                    
                    <h:outputLabel value="Email:"/>
                    <p:inputText value="#{clienteManager.email}"/>
                    
                    <h:outputLabel value="Tipo:"/>
                    <p:selectOneMenu value="#{clienteManager.tipo}">  
                        <f:selectItem itemLabel="Seleccione" itemValue="" />  
                        <f:selectItem itemLabel="Empleado" itemValue="empleado" />  
                        <f:selectItem itemLabel="Cliente" itemValue="cliente" />
                    </p:selectOneMenu> 
                    
                    <h:outputLabel value="Nombre de Usuario:"/>
                    <p:inputText value="#{clienteManager.username}"/>
                    
                    <h:outputLabel value="Contraseña:"/>
                    <p:password value="#{clienteManager.password1}" redisplay="true"/>
                    
                    <h:outputLabel value="Repita Contraseña:"/>
                    <p:password value="#{clienteManager.password2}"  redisplay="true"/>
                    
                    <p:commandButton value="Guardar" action="#{clienteManager.guardar()}" ajax="false"/>
                    <p:commandButton value="Index" action="#{clienteManager.returntoIndex()}" ajax="false"/>
                    
                </p:panelGrid>
            </p:panel>
            
            <p:panel header="Listado de Usuarios">
                <p:panelGrid columns="2">
                    <p:inputText value="#{clienteManager.busqueda}"/>
                    <p:commandButton value="..." action="#{clienteManager.buscar()}" ajax="false"/>
                </p:panelGrid>
                <p:panelGrid columns="1">
                    <p:dataTable id="usuariostable" var="usuario" value="#{clienteManager.personas}" paginator="true" rows="10">
                                <!-- selection="{rutaAction.direccionAuxiliar}" selectionMode="multiple"-->

                       <f:facet name="header">  
                           LISTADO DE USUARIOS
                       </f:facet>  

                       <p:column headerText="ID">  
                           #{usuario.idPersona}  
                       </p:column>  
                                
                        <p:column headerText="NOMBRE USUARIO">  
                           #{usuario.usuario.username}  
                       </p:column> 

                       <p:column headerText="CEDULA">  
                           #{usuario.cedula}  
                       </p:column>  

                       <p:column headerText="NOMBRE">  
                           #{usuario.nombre}  
                       </p:column>  

                       <p:column headerText="APELLIDO" >  
                           #{usuario.apellido}  
                       </p:column>  

                       <p:column headerText="DIRECCION">  
                           #{usuario.direccion}  
                       </p:column>  

                       <p:column headerText="TELEFONO">  
                           #{usuario.telefono}  
                       </p:column>  
                                
                       <p:column headerText="TIPO">  
                           #{usuario.tipo}  
                       </p:column>  

                       <p:column headerText="">  
                           <p:commandLink action="#{clienteManager.editarUsuario(usuario)}" value="Modificar" ajax="false"/> 
                       </p:column>   
                   </p:dataTable>
                </p:panelGrid>
            </p:panel>
            
        </h:form>
    </ui:define>
</ui:composition>

